<template>
    <div class="pre_headArea">
        <div class="headArea">
            <mu-appbar style="width: 100%;" color="primary" class="fontsize_header">
                <mu-button icon slot="left">
                    <mu-icon value="menu" class="fontsize_header"></mu-icon>
                </mu-button>
                Title
                <mu-menu slot="right">
                    <mu-button flat class="fontsize_header">MENU</mu-button>
                    <mu-list slot="content">
                        <mu-list-item button>
                            <mu-list-item-content>
                                <mu-list-item-title class="fontsize_header">Menu Item 1</mu-list-item-title>
                            </mu-list-item-content>
                        </mu-list-item>
                        <mu-list-item button>
                            <mu-list-item-content>
                                <mu-list-item-title class="fontsize_header">Menu Item 2</mu-list-item-title>
                            </mu-list-item-content>
                        </mu-list-item>
                    </mu-list>
                </mu-menu>
            </mu-appbar>
            <div class="searchArea">
                <input type="text"  placeholder="大家都在搜索的热门视频" class="searchSty">
            </div>
        </div>
    </div>
</template>

<script >
    export default {
        name: "headArea"
    }
</script>

<style scoped>
    .pre_headArea{
        width:100%;
        height:auto;
        position: relative;
    }
    .headArea{
        width:100%;
        position: fixed;
        top:0;
        left:0;
        z-index: 9;

    }
 .fontsize_header{
     font-size:14px;
 }
 .searchArea{
     width:100%;
     height:40px;
     float:left;
     background:#2196f3;

 }
    .searchSty{
        width:90%;
        height:30px;
        float:left;
        margin-left:5%;
        border-radius:20px;
        border:none;
        line-height: normal; /* for non-ie */
        line-height: 22px\9; /* for ie */
        text-align: center;
        outline: none;
    }
</style>